import { alert_self } from "../../util/alerts";
import { insertPagesCssLink } from "../../util/insert-style";
import { order_tage } from "../../util/order-control";
import { fetchMenu } from "../home/api";
import { fetchOrders,order as order_gg } from "./api"



function remove_one(id,all){
    const order = JSON.parse(localStorage.getItem("order")||"[]")
    let count = 0;
    order.forEach(i=>{
        if(i.id == id){
           if(!all){
            
            
            if(i.count>0){
                i.count-=1;
                count = i.count;
            }
            
           }else{
            i.count=0
           }
        }
    })
    localStorage.setItem("order",JSON.stringify(order))
    
    return count;
}

function buy_all(id){
    const order = JSON.parse(localStorage.getItem("order"))
    order.forEach(i=>{
        if(i.id == id){
            i.count=0
        }
    })
    localStorage.setItem("order",JSON.stringify(order))
}

export async function createOrder(){

    const orders_history  =await fetchOrders(1)
    let menu = await fetchMenu()
    let current_index = 1;
    const card=(opt) => {
        const card_template = $(/*HTML*/`
            <div
            class="d-flex order-card w-100"
            >
    
                <img class="card-img h-100 w-50" src="${opt.cuisineImgPath}"/>
                <div id="card-content" class="card-content w-50 h-100  d-flex flex-column justify-content-between">
                    <div class="content-top">
                        <h2>
                    
                        ${opt.cuisineName}
                    
                        </h2>
                        <span class="text-bg-primary badge ">目前有${opt.count}份下单</span>
                    
                    </div>
                    <p >
                    ${opt.cuisineDesc}
                    </p>
                    <div class="content-bottom d-flex ">
                        <span class="btn btn-success buy-all">全部购买</span>
                        <span class="btn btn-success remove-all">全部取消</span>
                        <span class="btn btn-success remove-one">取消一个</span>
                    </div>
                </div>
        
                </div>
            
            `)

            card_template.find(".buy-all").on("click",async function(){
               
                
               let order_x = await order_gg({
                userId:1,
                cuisines:[opt]
               })
                if(order_x>=0){
                    let {show,out} = alert_self("购买成功","su")
            
                    
                    show()
                    setTimeout(out,2000)
                    card_template.hide("slow")
                    card_template.remove()
                    remove_one(opt.id,true)
                    $(".top-badge").text(order_tage())
                    if(order_tage()==0 && current_index ==1) {
                        $(".top-badge").remove()
                        $(".order-bottom").html(`<p>暂无未操作订单</p>`)
                    }
                }else{
                    let {show,out} = alert_self("好像失败了")
            
                    
                    show()
                    setTimeout(out,2000)
                    
                }
                $(".top-badge").text(order_tage())
            })
            card_template.find(".remove-all").on("click",function(){
                remove_one(opt.id,true)
                card_template.hide()
                card_template.remove()
                $(".top-badge").text(order_tage())
                if(order_tage()==0 && current_index ==1) {
                    $(".top-badge").remove()
                    $(".order-bottom").html(`<p>暂无未操作订单</p>`)
                }
            })
            card_template.find(".remove-one").on("click",function(){
                let new_count = remove_one(opt.id,false)
                card_template.find(".badge").text(`目前有${new_count}份下单`)
                $(".top-badge").text(order_tage())
                if(new_count == 0){
                    card_template.hide("slow")
                    card_template.remove()
                }
                if(order_tage()==0 && current_index ==1) {
                    $(".top-badge").remove()
                    $(".order-bottom").html(`<p>暂无未操作订单</p>`)
                }
            })
            return card_template[0];
    }

    const conetnt = $(/*HTML*/`
        <div class="order-content d-flex flex-column w-100 h-100 ">
           <div class="top d-flex" >
            <div class="order-top-item " >已购历史订单</div>
            <div class="order-top-item order-active" >
           ${
            order_tage()>0?` <span class="position-absolute top-badge top-0 start-100 z-3 translate-middle badge rounded-pill bg-danger">
            ${order_tage()}
            </span>`:''
           }
            未操作订单</div>
           </div>
           <div class="order-bottom align-items-center
  justify-content-evenly d-flex flex-column">

           </div>
          
        </div>
        `)
        function fillBottom(index){
            if(index===1){
                let order = JSON.parse(localStorage.getItem("order"))||[]
                if(order.length>0 && order_tage()>0){
                  const opt =  order.map(io=>{
                        if(io.count>0){
                            menu.forEach(im=>{
                                if(io.id == im.id){
                                    io = {
                                        ...im,
                                        count:io.count
                                    }
                                }
                            })
                            return io
                        }
                    }).filter(i=>Boolean(i))
                   
                    
                return opt.map(i=>card(i))
                }
                return [`<p>暂无未操作订单</p>`]
            }
            return ['']
        }
       conetnt.find(".order-bottom").html(fillBottom(current_index))
        
        conetnt.find(".order-top-item").on("click",function(){
           $(".order-top-item").removeClass("order-active")
           $(this).addClass("order-active")
           
           conetnt.find(".order-bottom").html( fillBottom($(this).index()))
          
        })
        insertPagesCssLink("orders")
        return conetnt[0]
}